"use client";

import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Star, ShoppingCart } from "lucide-react";
import Link from "next/link";

const products = [
  {
    id: 1,
    name: "碳纤维超轻鱼竿",
    description: "专业级碳纤维材质，超轻设计，适合长时间使用，减轻疲劳感。",
    price: 1299,
    rating: 4.8,
    image: "https://images.pexels.com/photos/2931915/pexels-photo-2931915.jpeg",
    badge: "畅销",
  },
  {
    id: 2,
    name: "多功能伸缩鱼竿",
    description: "可伸缩设计，便于携带和存储，适合各种钓鱼环境。",
    price: 899,
    rating: 4.5,
    image: "https://images.pexels.com/photos/2345230/pexels-photo-2345230.jpeg",
    badge: "新品",
  },
  {
    id: 3,
    name: "海钓专业鱼竿",
    description: "专为海钓设计，抗腐蚀材质，强力抗拉能力，适合大型鱼类。",
    price: 1599,
    rating: 4.9,
    image: "https://images.pexels.com/photos/2886202/pexels-photo-2886202.jpeg",
    badge: "推荐",
  },
  {
    id: 4,
    name: "入门级钓鱼套装",
    description: "包含鱼竿、鱼线、鱼钩等全套装备，适合钓鱼初学者。",
    price: 599,
    rating: 4.3,
    image: "https://images.pexels.com/photos/1670187/pexels-photo-1670187.jpeg",
    badge: "超值",
  },
];

export function FeaturedProducts() {
  return (
    <section className="py-12 md:py-20 bg-muted/50">
      <div className="container px-4 md:px-6">
        <div className="flex flex-col items-center justify-center space-y-4 text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
          >
            <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">特色产品</h2>
            <p className="mx-auto mt-4 max-w-[700px] text-muted-foreground md:text-xl">
              探索我们精选的高品质钓鱼竿，为您的钓鱼之旅提供最佳装备
            </p>
          </motion.div>

          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 mt-8">
            {products.map((product, index) => (
              <motion.div
                key={product.id}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
              >
                <Card className="h-full overflow-hidden transition-all hover:shadow-lg">
                  <div className="relative aspect-square overflow-hidden">
                    <img
                      src={product.image}
                      alt={product.name}
                      className="object-cover w-full h-full transition-transform hover:scale-105"
                    />
                    {product.badge && (
                      <Badge className="absolute top-2 right-2 bg-primary">{product.badge}</Badge>
                    )}
                  </div>
                  <CardHeader className="p-4">
                    <CardTitle className="line-clamp-1">{product.name}</CardTitle>
                    <div className="flex items-center space-x-1">
                      <Star className="h-4 w-4 fill-primary text-primary" />
                      <span className="text-sm font-medium">{product.rating}</span>
                    </div>
                  </CardHeader>
                  <CardContent className="p-4 pt-0">
                    <CardDescription className="line-clamp-2 min-h-[40px]">
                      {product.description}
                    </CardDescription>
                  </CardContent>
                  <CardFooter className="p-4 flex items-center justify-between">
                    <div className="font-bold">¥{product.price}</div>
                    <Button size="sm" className="rounded-full">
                      <ShoppingCart className="mr-2 h-4 w-4" />
                      加入购物车
                    </Button>
                  </CardFooter>
                </Card>
              </motion.div>
            ))}
          </div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.4 }}
            className="mt-8"
          >
            <Link href="/products">
              <Button variant="outline" size="lg">
                查看全部产品
              </Button>
            </Link>
          </motion.div>
        </div>
      </div>
    </section>
  );
}